<template>
	<view class="order-list">
		<!-- 条件显示 -->
		<view class="order-nav">
			<view class="order-nav-item" :class="{active:item.value === navValue}" v-for="item in navs" :key="item.value" @click="turnNav(item.value)">{{item.label}}</view>
		</view>
		<!-- 订单列表 -->
		<view class="list">
			<view class="order-item" v-for="item in list" :key="item.id">
				<view class="order-head">
					<view class="">
						<view class="order-field">订单编号：{{item.order_no}}</view>
						<view class="order-field">用户：{{item.nickname}} | {{item.mobile}}</view>
						<view class="order-field">下单时间：{{item.create_time}}</view>
					</view>
					<view class="order-status">{{item.status_name}}</view>
				</view>
				<view class="order-product">
					<image class="product-image" :src="item.goods_img" mode="aspectFit"></image>
					<view class="product-info">
						<view class="product-name">{{item.goods_name}}</view>
						<view class="product-desc">
							<!-- <view class="product-desc-item">型号：小号</view> -->
							<!-- <view class="product-desc-item">颜色：白色</view> -->
						</view>
					</view>
					<view class="">
						<view class="product-price">{{item.priceArr[0]}}.<view class="product-decimal">{{item.priceArr[1]}}</view>
						</view>
						<view class="product-number">x{{item.num}}</view>
					</view>
				</view>
				<view class="order-bottom">
					<view class="" v-if="item.id === toggleId">
						<view class="order-address">
							<view class="order-contact">
								<view class="contact-user">{{item.name}}</view>
								<view class="contact-mobile">{{item.phone}}</view>
							</view>
							<view class="address-detail">{{item.full_address+item.address}}</view>
						</view>
						<view class="order-footer footer-collapse">
							<!-- <view class="order-button" @click="checkLogistics(item.order_id)">查看物流</view> -->

							<view class="order-toggle" @click="toggleAddress('')">收起<image class="order-toggle-icon" :src="$util.img('upload/uniapp/declaration/icon-arrow-top.png')"></image>
							</view>
						</view>
					</view>
					<view class="order-footer footer-collapse" v-else>
						<view class="order-toggle" @click="toggleAddress(item.id)">展开<image class="order-toggle-icon" :src="$util.img('upload/uniapp/declaration/icon-arrow-top.png')"></image>
						</view>
					</view>
				</view>
			</view>
			<ns-empty v-if="!list.length" text="暂无订单记录" :isIndex="!1"></ns-empty>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navs: [{
					label: '全部',
					value: 0,
				}, {
					label: '待审核',
					value: 1,
				}, {
					label: '待发货',
					value: 2,
				}, {
					label: '待收货',
					value: 3,
				}],
				navValue:0,//默认为全部
				list:[],
				toggleId:'',
				page:1,
				page_size:15,
				page_count:''
			};
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '报单列表'
			})
		},
		onShow() {
			if(uni.getStorageSync('token')){
				this.page = 1;
				this.getListData()
			} else {
				this.$util.redirectTo(
					'/otherpages/login/login/login', {
						back: '/promotionpages/declaration/order-list'
					},
					'redirectTo'
				);
			}
		},
		onReachBottom() {
			this.getMoreData()
		},
		methods:{
			getListData(){
				this.$api.sendRequest({
					url:'/declaration/api/Declaration/getOrderLists',
					data:{
						type :this.navValue,
						page:this.page,
						page_size:this.page_size
					},
					success:res =>{
						if(res.code==0){
							let newArr = []
							newArr = res.data.list
							if(this.page==1){
								this.list = []
							}
							newArr.forEach(v => {
								v.priceArr = v.price.split('.')
							});
							this.list = this.list.concat(newArr)
							this.page_count = res.data.page_count
						}else{
							this.$util.showToast({
								title: res.message
							});
						}
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			getMoreData(){
				if(this.page < this.page_count){
					this.page++;
					this.getListData();
				}
			},
			toggleAddress(id){//切换展开收起
				this.toggleId = id;
			},
			turnNav(value){
				this.navValue = value;
				this.page = 1
				this.getListData()
			},
			checkLogistics(order_id){//查看物流
				if (!order_id) {
					return this.$util.showToast({ title: '暂无物流数据信息！'});
				}
				this.$util.redirectTo('/otherpages/order/logistics/logistics?order_id='+order_id);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './style.scss';
	$border:1rpx solid #EBEBEB;

	.order-list {}

	.order-nav {
		width: 750rpx;
		background: #FFFFFF;
		@include flex(space-around);

		.order-nav-item {
			position: relative;
			padding: 25rpx 0;
			font-size: 28rpx;
			color: #303133;
			line-height: 40rpx;
			&.active {
				&::after{
					content:'';
					width: 100%;
					height: 4rpx;
					background-color: #FF4544;
					position: absolute;
					left: 0;
					bottom: 0;
				}
			}
		}
	}

	.list {}

	.order-item {
		margin: 24rpx 30rpx;
		background-color: #fff;
		border-radius: 20rpx;

		.order-head {
			padding: 40rpx 30rpx 24rpx 30rpx;
			@include flex(space-between, flex-start);

			.order-field {
				margin-bottom: 20rpx;

				&:last-child {
					margin-bottom: 0;
				}

				font-size: 28rpx;
				color: #303133;
				line-height: 28rpx;
			}

			.order-status {
				font-size: 28rpx;
				color: #FF4544;
				line-height: 40rpx;
			}
		}

		.order-product {
			padding: 30rpx;
			border-top: $border;
			@include flex(space-between, flex-start);

			.product-image {
				width: 158rpx;
				height: 158rpx;
				flex-shrink: 0;
			}

			.product-info {
				width: 290rpx;
				flex-shrink: 0;

				.product-name {
					font-size: 28rpx;
					color: #303133;
					line-height: 38rpx;
					overflow: hidden;
					word-break: break-all;  /* break-all(允许在单词内换行。) */
					text-overflow: ellipsis;  /* 超出部分省略号 */
					display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
					-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
					-webkit-line-clamp: 2; /** 显示的行数 **/
				}

				.product-desc {
					margin-top: 20rpx;
					@include flex(flex-start, center);

					.product-desc-item {
						margin-right: 12rpx;
						font-size: 24rpx;
						color: #909399;
						line-height: 33rpx;
					}
				}
			}

			.product-price {
				font-size: 32rpx;
				color: #303133;
				line-height: 38rpx;
				@include flex(center, flex-end);

				&::before {
					content: '¥';
					font-size: 24rpx;
					line-height: 32rpx;
				}

				.product-decimal {
					font-size: 24rpx;
					line-height: 32rpx;
				}
			}

			.product-number {
				text-align: right;
				font-size: 28rpx;
				color: #909399;
				line-height: 40rpx;
			}
		}

		.order-bottom {
			border-top: $border;
			.order-footer {
				padding: 30rpx;
				@include flex(space-between);
				.order-button{
					width: 170rpx;
					height: 60rpx;
					font-size: 28rpx;
					border-radius: 32px;
					border: 1px solid #909399;
					color: #606266;
					text-align: center;
				}
				.order-toggle {
					@include flex(flex-end);
					font-size: 24rpx;
					color: #303133;
					line-height: 28rpx;
					.order-toggle-icon {
						width: 28rpx;
						height: 28rpx;
					}
				}
				&.footer-collapse {
					justify-content: flex-end;
					.order-toggle-icon { 
						transform: rotate(180deg);
					}
				}
			}

			.order-address {
				border-bottom: $border;
				padding: 30rpx;
				.font-address {
					font-size: 28rpx;
					color: #303133;
					line-height: 40rpx;
				}
				.order-contact {
					@include flex(flex-start);
					.contact-user {}

					.contact-mobile {
						margin-left: 16rpx;
					}
				}

				.address-detail {
					margin-top: 12rpx;
					// overflow: hidden;
					// word-break: break-all;  /* break-all(允许在单词内换行。) */
					// text-overflow: ellipsis;  /* 超出部分省略号 */
					// display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
					// -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
					// -webkit-line-clamp: 2; /** 显示的行数 **/
				}
			}
		}
	}
</style>
